<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
		<div class="title">基础设置</div>
		<el-form-item label="组件高度" >
            <dc-slider :min="50" :max="200" v-model="settingData.data.height"></dc-slider>
        </el-form-item>
		<el-form-item label="左边比例" >
            <dc-slider :min="1" :max="20" v-model="settingData.data.leftRatio">
				<template #suffix>&nbsp;</template>
			</dc-slider>
        </el-form-item>
		<el-form-item label="右边比例" >
            <dc-slider :min="1" :max="20" v-model="settingData.data.rightRatio">
				<template #suffix>&nbsp;</template>
			</dc-slider>
        </el-form-item>
		<el-form-item label="菜单1比例" >
            <dc-slider :min="1" :max="10" v-model="settingData.data.rightTop">
				<template #suffix>&nbsp;</template>
			</dc-slider>
        </el-form-item>
		<el-form-item label="菜单2比例" >
            <dc-slider :min="1" :max="10" v-model="settingData.data.rightBottom">
				<template #suffix>&nbsp;</template>
			</dc-slider>
        </el-form-item>
		<el-form-item label="组件间隔" >
            <dc-slider :max="30" v-model="settingData.data.space"></dc-slider>
        </el-form-item>
		<el-form-item label="图片圆角" >
            <dc-slider :max="100" v-model="settingData.data.radius"></dc-slider>
        </el-form-item>
        <div class="content">
		  <div class="title">菜单1设置</div>
          <el-form-item label="菜单1图片" >
            <div class="sa-flex sa-m-t-10">
              <sa-uploader v-model="settingData.data.menu1" fileType="image"></sa-uploader>
            </div>
          </el-form-item>
		  <el-form-item label="小程序">
            <el-switch v-model="settingData.data.mp1.isMp" :active-value="1" :inactive-value="0" />
          </el-form-item>
		  <template v-if="settingData.data.mp1.isMp ==1">
            <el-form-item label="小程序路径">
              <el-input
                v-model="settingData.data.mp1.path"
                placeholder="请输入小程序路径"
              ></el-input>
            </el-form-item>
            <el-form-item label="小程序appid">
              <el-input
                v-model="settingData.data.mp1.appid"
                placeholder="请输入小程序appid"
              ></el-input>
            </el-form-item>
			<el-form-item label="小程序原始ID">
              <el-input
                v-model="settingData.data.mp2.id"
                placeholder="请输入小程序原始ID"
              ></el-input>
            </el-form-item>
          </template>
          <el-form-item v-else label="菜单1连接">
            <div class="sa-flex sa-m-t-10">
              <dc-url v-model="settingData.data.menu1link"></dc-url>
            </div>
          </el-form-item>
		  <div class="title">菜单2设置</div>
          <el-form-item label="菜单2图片">
            <div class="sa-flex sa-m-t-10">
              <sa-uploader v-model="settingData.data.menu2" fileType="image"></sa-uploader>
            </div>
          </el-form-item>
		  <el-form-item label="小程序">
            <el-switch v-model="settingData.data.mp2.isMp" :active-value="1" :inactive-value="0" />
          </el-form-item>
		  <template v-if="settingData.data.mp2.isMp ==1">
            <el-form-item label="小程序路径">
              <el-input
                v-model="settingData.data.mp2.path"
                placeholder="请输入小程序路径"
              ></el-input>
            </el-form-item>
            <el-form-item label="小程序appid">
              <el-input
                v-model="settingData.data.mp2.appid"
                placeholder="请输入小程序appid"
              ></el-input>
            </el-form-item>
			<el-form-item label="小程序原始ID">
              <el-input
                v-model="settingData.data.mp2.id"
                placeholder="请输入小程序原始ID"
              ></el-input>
            </el-form-item>
          </template>
          <el-form-item v-else label="菜单2连接">
            <div class="sa-flex sa-m-t-10">
              <dc-url v-model="settingData.data.menu2link"></dc-url>
            </div>
          </el-form-item>
		  <div class="title">轮播图样式</div>
          <!-- <el-form-item label="选择样式">
            <el-radio-group class="custom-radio-button" v-model="settingData.data.mode">
              <el-radio-button :label="1">
                <sa-icon icon="sa-shop-decorate-imageBanner-mode-1" />
              </el-radio-button>
              <el-radio-button :label="2">
                <sa-icon icon="sa-shop-decorate-imageBanner-mode-2" />
              </el-radio-button>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="Dot样式">
            <el-radio-group class="custom-radio-button" v-model="settingData.data.indicator">
              <el-radio-button :label="1">
                <sa-icon icon="sa-shop-decorate-imageBanner-indicator-1" />
              </el-radio-button>
              <el-radio-button :label="2">
                <sa-icon icon="sa-shop-decorate-imageBanner-indicator-2" />
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="间距">
            <dc-slider v-model="settingData.data.space"></dc-slider>
          </el-form-item>
          <el-form-item label="AI显示">
            <el-radio-group v-model="settingData.data.aiShow">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="ai图片">
            <sa-uploader v-model="settingData.data.aiImg" fileType="image"></sa-uploader>
          </el-form-item>
          <el-form-item label="跳转地址">
            <el-input v-model="settingData.data.aiUrl" placeholder="ai问诊跳转地址"></el-input>
          </el-form-item> -->
        </div>
      </div>
      <dc-list
        v-model="settingData.data.list"
        :itemProp="{ title: '', type: 'image', src: '', poster: '', url: '' }"
      >
        <template #title>图片上传</template>
        <template #listItem="{ element }">
          <el-form-item label="标题">
            <el-input v-model="element.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="选择类型">
            <el-radio-group v-model="element.type">
              <el-radio label="image">图片</el-radio>
              <el-radio label="video">视频</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上传">
            <sa-uploader v-model="element.src" :fileType="element.type"></sa-uploader>
          </el-form-item>
          <el-form-item v-if="element.type == 'video'" label="视频封面">
            <sa-uploader v-model="element.poster" fileType="image"></sa-uploader>
          </el-form-item>
          <el-form-item label="链接">
            <dc-url v-model="element.url"></dc-url>
          </el-form-item>
        </template>
      </dc-list>
    </template>
  </div>
</template>

<script setup>
  import dcList from '../../common/dc-list.vue';
  import dcUrl from '../../common/dc-url.vue';
  import dcSlider from '../../common/dc-slider.vue';

  const props = defineProps(['settingData', 'tabType']);
</script>
